import React, { Component } from 'react'
import store from '../Store/index'
// react-redux 是将redux改造后得到的一个库，用来管理公用数据的状态，需要搭配redux使用
// 核心概念：UI组件（简单，负责页面的呈现，没有数据和逻辑）和容器组件（相反）
// 写出来的组件都是UI组件，需要通过connect方法(react-redux中的函数)转化为容器组件
// connect方法有两个参数：mapStateToProps（接受store中的state给当前组件的props用来获取数据，类似vuex中的mapState） 和 mapDispatchToProps
// mapDispatchToProps 接受store中的dispatch给Props用来修改数据 类似vuex中的mapAction mapMutation
// <Provider> 组件 的作用是跨级传递数据 vue3和react中也有这个组件 可以传给所有的子组件和孙组件 每个组件都有这个数据

export default class Redux2 extends Component {
    constructor() {
        super();
        this.state = {
            order: {
                list: []
            },
            user: {
                info: {}
            }
        }
    }
    componentDidMount() {
        this.setState(store.getState())
        this.fn = store.subscribe(()=>{
            this.setState(store.getState())
        })
    }
    componentWillUnmount() {
        this.fn()
    }
    addOrder() {
        // 新增订单内容 再插入一个水果 放在list中 petch
        store.dispatch({type: 'add', payload: 'petch'})
    }
    changeAge() {
        store.dispatch({type: 'changeName', name: ''})
    }
    render() {
        return (
            <div>
                <p>Redux2---合并reducer后的组件</p>
                <p>用户信息：名字--{this.state.user.info.name}</p>
                <button onClick={()=>this.changeAge()}>隐姓埋名</button>
                <button onClick={()=>this.addOrder()}>新增订单内容</button>
                <p>订单</p>
                {
                    this.state.order.list.map((item, index) => {
                        return (
                            <p key={index}>{item}</p>
                        )
                    })
                }
            </div>
        )
    }
}
